<template>
<div>
  <swiper class="swiper"  circular="true" autoplay="true" interval="2000" duration="1000">
    <block v-for="(item, index) in movies" :index="index" :key="item">
        <swiper-item>
            <image :src="item.url"  class="slide-image" mode="aspectFill"/>
        </swiper-item>
    </block>
</swiper>
 <div v-for="(itemd,idx) of oldList" :key="idx">
<div v-for="(item,index) of oldList[idx]"  :key="index">
  <!-- <div v-html="item.schoolannouncementpush.text"></div> -->
    <noticeme
    :id="item.schoolannouncementpush.ID"
    :type="item.type"
    :title="item.schoolannouncementpush.title"
    :text="item.schoolannouncementpush.text"
    :time="Date.parse(new Date(item.createdAt))"
    />
</div>
</div>
 <div class="laodMore">
      <div v-show="logStatus === 0">
        <div>上拉加载</div>
      </div>
      <div v-show="logStatus === 1">
        <div>正在加载</div>
      </div>
      <div v-show="logStatus === 2">
        <div>没有更多数据了</div>
      </div>
    </div>
</div>
</template>

<script>
import noticeme from "@/components/someceme/index";
export default {
  data () {
    return {
      logStatus:0,
      motto: 'Hello miniprograme',
      userInfo: {
        nickName: 'mpvue'
        // avatarUrl: 'http://mpvue.com/assets/logo.png'
      },
      movies: [
        {url: 'https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/banner@2x.png'},
        {url: 'https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/banner@2x.png'},
        {url: 'https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/banner@2x.png'}
      ],
      list:[],
      currentPage:1,
      oldList:[]
    }
  },
  components: {
    noticeme
  },
  watch: {
    currentPage(){
      this.other()
    }
  },
  onShow(){
    this.oldList=[]
    this.list=[]
    this.start();
 },
  onReachBottom(){
    this.onScroll()
  },
  mounted() {
    // this.start();
    // this.other();
  },
  methods: {
    onScroll(){
      this.logStatus = 1
      if (this.noData === true) {
        this.logStatus = 2
        return false
      }
      setTimeout(() => {
      if(this.oldList.length<this.list.length/7){
        this.currentPage+=1
        this.logStatus = 0
      }else{
        this.logStatus = 2
          this.noData = true
      }
      },500)
    },
    other(){
       let pages = Math.ceil(this.list.length / 7);
      const newList=[]
      for (let i = 0; i < pages; i++) {
        let sonList = [];
        sonList = this.list.slice(i * 7, i * 7 + 7);
        newList.push(sonList);
      }

      this.oldList.push(newList[this.currentPage - 1]);
    },
    start(){
       const ID = wx.getStorageSync('loginUserInfo').ID
         var that = this
        wx.request({
          url: this.$interfaces.findmail+"/"+ID,
         method: "get",
         success: function(res) {
           for(var i = 0 ; i < res.data.data.length;i++){

             that.list.push(res.data.data[i])
           }
           that.other()
         }
        })
       this.list.sort((a, b) => {
              return Date.parse(new Date(a.time))<Date.parse(new Date(b.time))?-1:1;
          });
    },
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    },
    clickHandle (ev) {
      console.log('clickHandle:', ev)
      // throw {message: 'custom test'}
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}
.all{
  width:7.5rem;
  height:1rem;
  background-color:blue;
}
.all:after{
  display:block;
  content:'';
  clear:both;
}
.left{
  float:left;
  width:3rem;
  height:1rem;
  background-color:red;
}

.right{
  float:left;
  width:4.5rem;
  height:1rem;
  background-color:green;
}
.swiper-item{
  width: 100%;
  display: block;
  height: 150px;
}
.slide-image{
   height: 100%;
    width: 100%;
    display: inline-block;
    overflow: hidden;
}
.swiper{
  height: 260rpx;
    width: 100%;
}
.laodMore {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #ccc;
    text-align: center;
  }
</style>
